<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/register.css">
    <title>注册</title>
</head>
<body>
    <!-- 头部模块开始 -->
    <header>
        <!-- 导航栏 -->
        <div class="nav-bar">            
            <nav class="nav-l">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html" title="qq阅读"></a>
                </div>
                <ul class="tab">
                    <li><a href="index.html" class="tab-active">首页</a></li>
                    <li><a href="sort.html">分类</a></li>
                    <li><a href="rank.html">排行榜</a></li>
                    <li><a href="community.html">社区</a></li>
                </ul>
            </nav>
            <nav class="nav-r">
                <a href="login.html" class="login">登录</a></li>
                <a href="register.html" class="reg">免费注册</a></li>
                <!-- search -->
                <form action="#" method="post" class="search">
                    <input type="text" placeholder="请输入书籍名或作者名">
                    <a href="#" class="ssicon"><img src="./img/icon/sys.ico" class=""></a>
                </form>
            </nav>
            

        </div>
    </header>
    
    <!-- 注册内容 -->
    <div class="container">
        <div class="reg-box">
            <h2>新用户注册</h2>
            <form action="./login.html" method="post" class="reg-form" onsubmit="return checkAll()">
                <div class="form-item">
                    <span class="iconfont"><img src="./img/icon/yhm.ico" alt=""></span>
                    <input type="text" name="user" id="user" placeholder="设置用户名称" onblur="checkUser()">
                    <span class="tip"></span>
                </div>
                <div class="form-item">
                    <span class="iconfont"><img src="./img/icon/yx.ico" alt=""></span>
                    <input type="email" name="email" id="email" placeholder="输入邮箱地址" onblur="checkEmail()">
                    <span class="tip"></span>
                </div>
                <div class="form-item">
                    <span class="iconfont"><img src="./img/icon/yzm.ico" alt=""></span>
                    <input type="text" name="code" id="code" placeholder="短信验证码" onblur="checkCode()">
                    <span class="tip"></span>
                    <a href="#" id="send">发送验证码</a>
                </div>
                <div class="form-item">
                    <span class="iconfont"><img src="./img/icon/mima.ico" alt=""></span>
                    <input type="password" name="password" id="pwd" placeholder="设置6-16位密码" onblur="checkPwd()">
                    <span class="tip"></span>
                </div>
                <div class="form-item">
                    <span class="iconfont"><img src="./img/icon/queren.ico" alt=""></span>
                    <input type="password" name="repwd" id="repwd" placeholder="请再输入一次密码" onblur="checkRepwd()">
                    <span class="tip"></span>
                </div>
                <div class="form-item tongyi">
                    <i class="queren"><img src="./img/icon/xz.ico" alt=""></i>
                    已阅读并同意<i>《用户服务协议》</i>
                </div>
                <div class="form-item">
                    <button class="submit" onclick="return checkAll()" >注册</button>    
                </div>
            </form>
        </div>
    </div>

    <!-- 脚部模块 -->
    <footer>
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
        </div>
    </footer>

    <script>
        function $(id) {
            return document.getElementById(id)
        }        
        // 定义正则表达
        var regUser = /^[a-zA-Z0-9-_]{6,10}$/  //用户名由6-10位字符组成
        var regEmail = /^\w+@\w+\.(com|com)$/
        var regCode = /^\d{4}$/                 //4位数字   
        var regPwd = /^[a-zA-Z0-9-_]{6,14}$/

        // 用户名验证
        function checkUser() {
            var user = $("user").value
            // 获取元素 Tip
            var span1 = $("user").nextElementSibling 
            // 1.定义正则 2.检测
            if (!regUser.test(user)) {
                span1.innerHTML = '用户名由6-10位字符组成'
                return false
            }
            // console.log('right')
            span1.innerHTML = ''
            return true
        }

        // 邮箱验证
        function checkEmail() {
            var email = $("email").value
            var span2 = $("email").nextElementSibling
            // 定义正则 检测
            if (!regEmail.test(email)) {
                span2.innerHTML = '请输入正确的邮箱'
                return false
            }
            // console.log('right')
            span2.innerHTML = ''
            return true
        }

        // 验证码验证
        function checkCode() {
            var code = $("code").value
            var span3 = $("code").nextElementSibling
            // 定义正则 检测
            if (!regCode.test(code)) {
                span3.innerHTML = '请输入4位验证码'
                return false
            }
            // console.log('right')
            span3.innerHTML = ''
            return true
        }

        // 密码验证
        function checkPwd() {
            var pwd = $("pwd").value
            var span4 = $("pwd").nextElementSibling 
            // 1.定义正则 2.检测
            if (!regPwd.test(pwd)) {
                span4.innerHTML = '密码由6-14位字符组成'
                return false
            }
            // console.log('right')
            span4.innerHTML = ''
            return true
        }
        // 确认密码
        function checkRepwd() {
            var rePwd = $("repwd").value
            var pwd = $("pwd").value
            var span5 = $("repwd").nextElementSibling 
            // 1.定义正则 2.检测
            if (rePwd != pwd) {
                span5.innerHTML = '两次密码不一致'
                return false
            }
            // console.log('right')
            span5.innerHTML = ''
            return true
        }
        // 提交
        function checkAll(){                                                
           if(checkUser() && checkPwd() && checkRepwd() && checkEmail() && checkCode()) {
            var user = $("user").value
            var pwd = $("pwd").value
            var obj = {"uname" : user, "pwd":pwd}
            // 用户名和密码存进对象里
            localStorage.setItem('obj', JSON.stringify(obj)) //转为JSON字符串存储
            location.replace("./login.html")
            return true
           } 
           alert("请输入正确信息")
           return false           
        }
                
    </script>
</body>
</html>